<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0" @click="redirectToUrl('https://www.sofascore.com/zh/football/rankings/fifa')">
        <img
          style="width: 50px"
          src="@/images/image.png"
          
          alt="Element logo"
        />
      </el-menu-item>
      <div class="flex-grow" />
      <el-sub-menu index="2">
        <template #title>菜单</template>
        <RouterLink to="/">
        <el-menu-item index="2-1">退出</el-menu-item>
        </RouterLink>
      </el-sub-menu>
    </el-menu>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
import { RouterLink } from 'vue-router';
  
  const activeIndex = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const redirectToUrl = (url: string) => {
  window.location.href = url;
}
  </script>
  
  <style>
  .flex-grow {
    flex-grow: 1;
  }
  </style>